<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
	<!--百度CDN-->
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			//get
			$("#btn1").click(function() {
				$.get('./ajax.php?name=james&age=18', function(data) {
					alert(data);
				});
			});

			//post
			$("#btn2").click(function() {
				$.post('./ajax.php', {name:"james",age:18}, function(data) {
					alert(data);
				});
			});

			//ajax
			$("#btn3").click(function() {
				$.ajax({
					url:"./ajax.php",
					type:"POST",
					dataType:"json",
					data:{name:"james",age:20},
					success:function(data) {
						$.each(data, function(index, val) {
							 alert(val);
						});
					},
					error:function(e) {
						alert(e);
					}
				});
			});
		});
	</script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		button {
			display: inline-block;
			width:200px;
			height:50px;
			font-size: 20px;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<button id="btn1">get请求</button>
	<button id="btn2">post请求</button>
	<button id="btn3">ajax请求</button>
</body>
</html>